<template>
	<swiper class="m-tiktok-video-swiper" circular @change="swiperChange" :current="state.current" :vertical="true"
		duration="300">

		<swiper-item v-for="(item, index) in state.displaySwiperList" :key="index">
			<view class="swiper-item" @click="handleClick">
				<uni-swiper-dot class="uni-swiper-dot-box" field="content" :info="item.picObj.pictures" mode='default'
					:current="currentdot" :dots-styles="dotsStyles">
					<swiper class="swiper-box" @change="changeRow" style="height: 100%;width: 100%;">
						<swiper-item v-for="(item2, index2) in item.picObj.pictures" :key="index2">
							<image :src="item2.url" class="image-style" mode="aspectFit"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<slot :item="item"></slot>
			</view>
		</swiper-item>
	</swiper>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance, watch, ref } from "vue";
	import type { ComponentInternalInstance, PropType } from "vue";
	import { onUnload } from "@dcloudio/uni-app";
	const _this = getCurrentInstance() as ComponentInternalInstance;

	const emits = defineEmits([
		"play",
		"error",
		"loadMore",
		"change",
		"click",
		"ended",
	]);
	const currentdot = ref(0)
	const changeRow = (e) => {
		currentdot.value = e.detail.current
	}
	const props = defineProps({
		swiperList: {
			type: Array,
			default: []
		},


		/**
		 * 滚动加载阈值（即播放到剩余多少个之后触发加载更多
		 */
		loadMoreOffsetCount: {
			type: Number,
			default: 2,
		}

	});
	const dotsStyles = ref(
		{
			bottom: 230,
			backgroundColor: '#ddd',
			border: '1px rgba(83, 200, 249,0.3) solid',
			color: '#fff',
			selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
			selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
		}
	)

	const state = reactive({
		swiperList: [] as any, // 源数据
		displaySwiperList: [] as any, // swiper需要的数据
		displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
		originIndex: 0, // 记录源数据的下标
		current: 0,
		oid: 0,
		videoContexts: [] as any,
		isFirstLoad: true,
		isPlaying: false,
	});




	function handleClick(e : Event) {
		emits("click", e);
	}

	/**
	 * 初始一个显示的swiper数据
	 * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
	 */
	function initSwiperData(originIndex = state.originIndex) {
		const swiperListLength = state.swiperList.length; // 源数据长度
		const displayList = [];
		displayList[state.displayIndex] = state.swiperList[originIndex];
		displayList[state.displayIndex - 1 == -1 ? 2 : state.displayIndex - 1] =
			state.swiperList[
			originIndex - 1 == -1 ? swiperListLength - 1 : originIndex - 1
			];
		displayList[state.displayIndex + 1 == 3 ? 0 : state.displayIndex + 1] =
			state.swiperList[originIndex + 1 == swiperListLength ? 0 : originIndex + 1];
		state.displaySwiperList = displayList;

		if (state.oid >= state.swiperList.length) {
			state.oid = 0;
		}
		if (state.oid < 0) {
			state.oid = state.swiperList.length - 1;
		}
		// 暂停所有视频
		state.videoContexts.map((item : any) => item?.stop());
		// 数据改变
		emits("change", {
			index: originIndex,
			detail: state.swiperList[originIndex],
		});
		// 赋值
		state.originIndex = originIndex;
		// 加载更多
		var pCount = state.swiperList.length - props.loadMoreOffsetCount;
		if (originIndex == pCount) {
			emits("loadMore");
		}
	}
	/**
	 * swiper滑动时候
	 */
	function swiperChange(event : any) {
		const { current } = event.detail;
		state.isFirstLoad = false;
		const swiperListLength = state.swiperList.length; // 源数据长度
		// 向后滚动
		if (state.displayIndex - current == 2 || state.displayIndex - current == -1) {
			state.originIndex =
				state.originIndex + 1 == swiperListLength ? 0 : state.originIndex + 1;
			state.displayIndex =
				state.displayIndex + 1 == 3 ? 0 : state.displayIndex + 1;
			state.oid = state.originIndex - 1;
			initSwiperData(state.originIndex);
		}
		// 如果两者的差为-2或者1则是向前滑动
		else if (
			state.displayIndex - current == -2 ||
			state.displayIndex - current == 1
		) {
			state.originIndex =
				state.originIndex - 1 == -1
					? swiperListLength - 1
					: state.originIndex - 1;
			state.displayIndex =
				state.displayIndex - 1 == -1 ? 2 : state.displayIndex - 1;
			state.oid = state.originIndex + 1;
			initSwiperData(state.originIndex);
		}
	}


	watch(
		() => props.swiperList,
		() => {
			if (props.swiperList?.length) {
				state.swiperList = props.swiperList
				if (state.isFirstLoad || !state.videoContexts?.length) {
					initSwiperData();
				}
			}
		},
		{
			immediate: true,
		}
	);

	let loadTimer : any = null;


	onUnload(() => {
		clearTimeout(loadTimer);
	});

	defineExpose({
		initSwiperData,
	});
</script>

<style lang="scss">
	@font-face {
		font-family: "m-tiktok-play-icon";
		src: url(data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAJ0AA0AAAAABlgAAAIiAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCQhEICkhaCwoAATYCJAMQBCAFhQIHLxt4BcieBXbLR4jiyygbC491Mg0vz9JsPPz/ft/2ufeMmCQP9fXfRhxvMKHjkcSsTkqWplJJqpFFfn79mr4NG5fvwujI+EPeZCbudGJcy6oVklRVp8IAdgMJUqD853ceuhm3iSafWxNoC0bbskAmUGABTlrDAgwsC+xJ3/SJf3DecLgpCpyFgDcXlRJ8uiufSVcHBjENilBVIVGQKS50UZ6U1+ApeD7+6kcvRVcl2fZub1Q8/BfJG9VHbUp9J0UAYBWhomIRgUZWYFHOKkgp+FFsyVvmRkB0E4AooAg/DwF/49FSQIJeBMbBDIAEQIzfDW+OPVHX48vXUy26fUwfJnN0+tW5bLx3+dz5fHT61rQEIBDc77r579ZI8793IDWgftfb8/q83gC9Cggqvex6gvqcDoBMGojkOvpX4wgU9OtHC2DcOwgwoYpA6LWDQNHjDgJVr8cCpF7PBOgy4JUA3Xq9BYF+29EgMGAiLlSRfVgDlgyjlmQx7JSsRgVQYkeyy7RLstuoF7Lfid+qAWtxbiWmkbDEVgmyA2hRBHx6jOEomxtSuCEvAg5k/U4c0Bh2XJIYfiwLaz88BE9oYgkrKPS0dWGtk7/X7rqFOsU+TZzFM4k9Qx9jOkEXC3iErR+f0LhcASEUC9g0CtaGY3Jrsjf6zPrqiLsTyi1RpN9z3wPOMRaa6+jQAzbblCgVWLpySeZmOVzvLw8uOfSjoLSEEiV7Yg==) format("woff2");
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	.uni-swiper__dots-box {
		bottom: 30% !important;
	}

	.m-tiktok-video-iconfont {
		font-family: m-tiktok-play-icon;
	}

	.m-tiktok-video-swiper,
	.m-tiktok-video-player {
		width: 100%;
		// #ifdef H5
		height: calc(100vh - 190rpx);
		// #endif
		// #ifdef MP-WEIXIN 
		height: 100vh;
		// #endif 
		background-color: #000;
	}

	.m-tiktok-video-swiper {
		.swiper-item {
			position: relative;
			height: 100%;

			.image-style {
				height: 100%;
				width: 100%;
			}

			.swiper-box {
				height: 100%;
				width: 100%;
			}

			.uni-swiper-dot-box {
				display: contents;
			}
		}

		.m-tiktok-video-poster {
			background-color: #000;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.m-tiktok-video-play-btn {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.video-icon {
				font-size: 50px;
				display: block;
				color: rgba(255, 255, 255, 0.8);
				opacity: 0;

				&.active {
					opacity: 1;
				}
			}
		}
	}
</style>